<template>
        <el-table :data="typeof props.modelValue.records === 'object' ? props.modelValue.records : JSON.parse(props.modelValue.records)" style="height: 500px;">
            <el-table-column :label="props.modelValue.mainTitle" align="center">
                <!-- 三级标题数据展示 -->
                <template v-if="props.modelValue.subTitle.length > 1">
                    <el-table-column v-for="item of props.modelValue.subTitle" :label="item.subtitle" align="center">
                        <el-table-column v-for="[key,value] of Object.entries(item.fields)" :label="value" align="center" :show-overflow-tooltip="true">
                            <el-table-column :prop="key" :show-overflow-tooltip="true"  min-width="200" align="center"></el-table-column>
                        </el-table-column>
                    </el-table-column>
                </template>
                <!-- 二级标题数据展示 -->
                <template v-else>
                    <el-table-column v-for="[key,value] of Object.entries(props.modelValue.subTitle[0].fields)" :label="value" align="center" :show-overflow-tooltip="true">
                        <el-table-column :prop="key" :show-overflow-tooltip="true"  min-width="200" align="center"></el-table-column>
                    </el-table-column>
                </template>
            </el-table-column>
        </el-table>
</template>

<script setup lang="ts">

interface Props { 
    modelValue:{
        mainTitle: string;
        subTitle: {
            subtitle: string;
            fields: Record<string,any>
        }[],
        records: Record<string,any>[] | string
    }
}
const props = defineProps<Props>()

</script>

<style scoped>

</style>